
// 第一个 ( ) 用于定义函数，比如采用 箭头函数形式 定义函数
// 第二个 ( ) 用于为第一个小括号定义的函数传递参数
// ( p => console.log( p ) )( 123 );


// 立即执行的函数表达式
(function(){

    const method = 'post';
    const url = '/explore/request';
    //const contentType = 'application/x-www-form-urlencoded';
    const contentType = 'application/json';
    //const entity = 'username=sanfeng&password=123&confirm=456';
    const entity = JSON.stringify( { id: 1 , name: '三丰' , gender: '男' } );

    // 选择按钮
    const btn = document.querySelector( '.async' );

    const listener = evt => {
        const $http = evt.target;
        if( $http.readyState === $http.DONE ){
            console.log( '事件目标: ' , $http );
            console.log( $http.response );
        }
    }

    const handler = evt => {
        console.log( '事件目标: ' , evt.target );

        // 1、创建用来发送请求、接收响应的对象
        let $http = new XMLHttpRequest();

        // 2、绑定监听器，用于监听 readyState 属性值的变化
        $http.addEventListener( 'readystatechange' , listener , false );

        // 3、打开连接
        $http.open( method , url );

        // 4、如果请求方式是POST则需要设置请求头
        if( 'post' === method.toLowerCase() ) {
            $http.setRequestHeader( 'content-type' , contentType );
        }

        // 5、发送请求
        $http.send( entity );
    }

    btn.addEventListener( 'click' , handler , false );

})();